<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrapper {
        color: aqua;
        font: bold 18px 黑体;
        background-color: #999999;
      }
      .box{
          border: 2px solid rgb(31, 29, 29);
      }
    </style>
  </head>
  <body>
    <script>
      //创建元素节点
      var el = document.createElement("p");
      console.log(el);

      //创建文本节点
      var txt = document.createTextNode("这个节点是动态创建的");
      console.log(txt);

      //创建属性节点
      var attr = document.createAttribute("class"); //添加属性名
      attr.value = "wrapper box"; //为属性设置值 可添加多个属性值
      console.log(attr);

      //关联以上三个节点
      el.appendChild(txt); //在元素节点上添加文本节点
      el.setAttributeNode(attr);//在元素节点上添加属性节点
      console.log(el);
      document.body.appendChild(el);//将创建的节点添加到文档中

    //另外写法(简洁写法)
    var oDiv = document.createElement('div');//创建元素节点
    oDiv.setAttribute('class','wrapper box');//为元素节点添加属性及属性值
    oDiv.innerHTML='创建DOM元素的简洁写法';//为元素节点设置文本内容
    document.body.appendChild(oDiv);//将创建的节点添加到文档中
    </script>
  </body>
</html>
